<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>		
		<div id="app">
			<!-- 使用子组件 -->
			<my-son></my-son>
			<!-- 静态传递值 -->
			<!-- <my-son cmsg="这是静态传值"></my-son> -->
			<!-- 动态传值 -->
			<!-- 
				父组件可以在引用子组件的时候，通过属性绑定(v-bind)的形式，
				把需要传递给子组件的数据，以属性绑定的形式，传递到子组件中，供子组件使用
			 -->
			<!-- <my-son :cmsg="msg"></my-son> -->
			<!-- 给组件绑定ref属性 -->
			<my-son ref="xg"></my-son>
			
			<button type="button" @click="changs">修改组件的内容</button>
		</div>		
		<template id="son">
			<div id="">
				<h2>这是子组件</h2>
				<div style="width: 200px; border: 1px solid  plum;">
					{{cmsg}}
				</div>
				<button type="button" @click="chang">修改</button>
			</div>
		</template>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<!-- 父组件向子组件传递数据 -->
		<script type="text/javascript">			
			// 子组件选项对象
			let MySon ={
				template:'#son',
				// props中的数据,都是通过父组件传递给子组件的
				// props就是把父组件传递过来的属性,现在props定义,才能使用这个数据
				// props中的数据,只能读取,不能重新赋值
				props:{
					cmsg:String,//限定类型
				},
				methods:{
					getcmsg(m){
						this.cmsg=m;
					},
					chang(){
						this.cmsg="被修改了"
					}					
				}
			}
			// 以Vue实例作为父组件
			new Vue({
				el:'#app',
				data:{
					msg:'这个是父组件中的msg'
				},
				methods:{
					changs(){
						// 获取到的是组件实例
						console.log(this.$refs)
						// 获取的是xg组件实例
						console.log(this.$refs.xg)						
						// $refs只能进行获取组件的实例对象，不能直接传值，强行传会报错
						// this.$refs.xg.cmsg="这是$refs传递过来的参数"
						// this.$refs.xg.getcmsg("这是$refs传递过来的参数")
						// this.msg=this.$refs.xg.cmsg="这是$refs传递过来的参数"
					}
				},
				components:{
					// 注册子组件
					MySon
				}
			})
		</script>
	</body>
</html>
